<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Search } from '@element-plus/icons-vue'

import { linkProviderSearch, linkProviderDetail, linkProviderDisable } from '@/api/linkProvider';
import { copyLink, messages, confirms } from '@/utils/currency';
import ListView from '@/components/common/ListView.vue';
import { useStore } from '@/stores';
import {LinkMetadata} from "@yeying-community/yeying-client-ts";
import { convertDateTimeToLocal, formatDateTime, fromISO } from "@yeying-community/yeying-web3";
const store = useStore();
const isMobile = ref(store.isMobile);
// 搜索参数
const condition = reactive({
    hash: '',
})

const tableData = ref<LinkMetadata[]>([])
const multipleSelection = ref<LinkMetadata[]>([])

// 搜索资产，根据条件和分页参数查询资产列表
const getList = async () => {
    tableData.value = await linkProviderSearch(condition);
}

const changeUtcToDate = (date:string) =>{
  return formatDateTime(convertDateTimeToLocal(fromISO(date)),"yyyy-MM-dd HH:mm:ss");
};

getList();
// 复制链接
const getCopyLink = async (uid: string) => {
    const { url } = await linkProviderDetail(uid);
    console.log(url.url);
    // 复制成功提示
    messages('复制链接成功', 'success');
    copyLink(url.url);
}

// 取消分享方法
const cancelShare = async (uid: string) => {
    confirms("确认取消吗？", "取消提示").then(async () => {
        await linkProviderDisable(uid);
        messages("取消分享成功");
        getList();
    })
}
// 状态管理方法
const setDetail = (value: LinkMetadata) => store.setDetail(value);
// 操作
const generateActions = (row: LinkMetadata) => [
    {
        label: '复制链接',
        icon: 'icon-fuzhilianjie',
        callback: () => getCopyLink(row.uid),
    },
    {
        label: '取消分享',
        icon: 'icon-quxiaofenxiang',
        callback: () => cancelShare(row.uid),
    },
    {
        label: '详情',
        icon: 'icon-xiangqing',
        callback: () => setDetail(row),
    },
];

// 更新选中项
const updateSelection = (val: LinkMetadata[]) => {
    // 触发父组件的事件，更新选中项
    multipleSelection.value = val;
};
</script>

<template>
  <div>

    <div class="flexSBCenter mb10">
      <div>
        <el-button v-if="multipleSelection.length" type="primary mr10" @click="cancelShare">取消分享</el-button>
      </div>
      <el-input class="class_search_input" v-model="condition.hash" clearable placeholder="输入文件名称"
                :suffix-icon="Search" />
    </div>
  </div>


    <ListView :data="tableData" :generateActions="generateActions" @update:selection="updateSelection">
        <template #dynamic-columns>
            <el-table-column :label="$t('assets.tabel.name')" width="auto">
                <template #default="scope">
                    <EllipsisText :text="scope.row.name" />
                </template>
            </el-table-column>
            <template v-if="!isMobile">
                <el-table-column prop="createdAt" :label="$t('assets.tabel.sharingTime')">
                  <template #default="scope">
                    <span>{{ changeUtcToDate(scope.row.createdAt) || '-' }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="expiredAt" :label="$t('assets.tabel.failureTime')">
                  <template #default="scope">
                    <span>{{ changeUtcToDate(scope.row.expiredAt) || '-' }}</span>
                  </template>
                </el-table-column>
            </template>
        </template>
        <template #operate="{ scope }">
            <span v-if="!isMobile" class="iconfont icon-fuzhilianjie pointer"
                @click="getCopyLink(scope.row.uid)"></span>
        </template>
    </ListView>
</template>

<style lang="scss" scoped>
.shares_tabel {
    width: 100%;
    height: calc(100vh - 200px);
}
</style>